<template>
  <div class="dispatch-list-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>查勘调度任务管理</h2>
    </div>

    <!-- 搜索筛选区域（仅保留报案ID，优化提示） -->
    <div class="search-bar">
      <el-row :gutter="20" wrap>
        <el-col :xs="24" :sm="16" :md="10" :lg="8">
          <el-input v-model="searchForm.reportId" placeholder="请输入报案ID（支持模糊查询，如输入REP2023即可匹配）" prefix-icon="Search"
            clearable @keyup.enter="fetchDispatchList" :disabled="searchLoading" />
        </el-col>
        <el-col :xs="24" :sm="8" :md="6" :lg="4" class="btn-group">
          <!-- 搜索按钮：添加加载状态，避免重复点击 -->
          <el-button type="primary" icon="Search" @click="fetchDispatchList" :loading="searchLoading"
            :disabled="searchLoading">
            搜索
          </el-button>
          <el-button type="default" icon="RefreshLeft" @click="resetSearchForm" :disabled="searchLoading">
            重置
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 列表表格区域（原逻辑不变） -->
    <div class="table-container">
      <el-table v-loading="tableLoading" :data="dispatchList" border stripe
        :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold' }" style="width: 100%"
        @row-click="handleRowClick" ref="dispatchTableRef">
        <!-- 调度ID -->
        <el-table-column prop="dispatchId" label="调度ID" align="center" width="100" fixed="left" />
        <!-- 报案ID -->
        <el-table-column prop="reportId" label="报案ID" align="center" width="180">
          <template #default="scope">
            <el-link type="primary" @click.stop="handleViewReport(scope.row.reportId)">{{ scope.row.reportId
            }}</el-link>
          </template>
        </el-table-column>
        <!-- 保单号 -->
        <el-table-column prop="policyId" label="保单号" align="center" width="180" />
        <!-- 调度员工号 -->
        <el-table-column prop="dispatcherWorkNo" label="调度员工号" align="center" width="140" />
        <!-- 查勘员工号 -->
        <el-table-column prop="surveyorWorkNo" label="查勘员工号" align="center" width="140" />
        <!-- 查勘地点 -->
        <el-table-column prop="surveyAddress" label="查勘地点" align="left" min-width="200" />
        <!-- 调度创建时间 -->
        <el-table-column prop="dispatchTime" label="调度创建时间" align="center" width="200">
          <template #default="scope">
            {{ formatDateTime(scope.row.dispatchTime) }}
          </template>
        </el-table-column>
        <!-- 计划查勘时间 -->
        <el-table-column prop="scheduledStartTime" label="计划查勘时间" align="center" width="200">
          <template #default="scope">
            {{ formatDateTime(scope.row.scheduledStartTime) }}
          </template>
        </el-table-column>
        <!-- 调度状态 -->
        <el-table-column prop="dispatchStatus" label="调度状态" align="center" width="140">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.dispatchStatus)"
              :icon="getStatusTagIcon(scope.row.dispatchStatus)">
              {{ getStatusText(scope.row.dispatchStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 调度备注 -->
        <el-table-column prop="dispatchRemark" label="调度备注" align="left" min-width="200">
          <template #default="scope">
            <el-tooltip :content="scope.row.dispatchRemark || '无备注'" placement="top" effect="dark">
              <div class="remark-text">{{ scope.row.dispatchRemark || '无备注' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- 操作列（取消按钮无状态限制） -->
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template #default="scope">
            <!-- 确认按钮：仅待确认（1）可点击 -->
            <el-button type="primary" icon="Check" @click.stop="handleConfirmDispatch(scope.row.dispatchId)"
              size="small" :disabled="scope.row.dispatchStatus !== 1" style="margin-right: 8px">
              确认
            </el-button>
            <!-- 取消按钮：任何时候可点击 -->
            <el-button type="danger" icon="CircleClose" @click.stop="handleCancelDispatch(scope.row.dispatchId)"
              size="small" :disabled="false">
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页控制区域（原逻辑不变） -->
    <div class="pagination-container">
      <el-pagination @size-change="handlePageSizeChange" @current-change="handleCurrentPageChange"
        :current-page="pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" background :disabled="searchLoading" />
    </div>

    <!-- 报案详情弹窗（原逻辑不变） -->
    <el-dialog v-model="reportDetailVisible" title="报案详情" width="50%" :close-on-click-modal="false">
      <div class="report-detail-content">
        <p><span class="label">报案ID：</span>{{ currentReportId }}</p>
        <p><span class="label">提示：</span>可在此加载报案表完整信息（如报案人、报案时间等）</p>
      </div>
      <template #footer>
        <el-button @click="reportDetailVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="cancelReasonVisible" title="取消调度" width="40%" :close-on-click-modal="false">
      <el-form :model="cancelForm" label-width="100px" :rules="cancelRules" ref="cancelFormRef">
        <el-form-item label="取消原因" prop="reason">
          <el-input v-model="cancelForm.reason" type="textarea" placeholder="请输入取消调度的原因" rows="4" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cancelReasonVisible = false">取消</el-button>
        <el-button type="primary" @click="submitCancelReason">确认提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, ref as vueRef } from 'vue'
import { ElMessage, ElMessageBox, ElTooltip, ElLink, ElTag, ElForm, ElFormItem, ElInput } from 'element-plus'
import axios from 'axios'
import hxxp from '@/utils/hxxp.js'

const searchLoading = ref(false) // 搜索按钮/输入框/分页/确认操作的加载状态
const tableLoading = ref(false)  // 表格数据加载状态（与el-table的v-loading绑定）
// 列表数据与表格引用（新增：表格引用用于匹配行数据）
const dispatchList = ref([])
const dispatchTableRef = vueRef(null) // 表格DOM引用，辅助获取行数据
// 分页参数
const pageNum = ref(1)
const pageSize = ref(2)
const total = ref(0)
// 搜索表单（仅报案ID）
const searchForm = reactive({
  reportId: ''
})
// 弹窗相关
const reportDetailVisible = ref(false)
const currentReportId = ref('')
const cancelReasonVisible = ref(false)
const cancelFormRef = vueRef(null)
const cancelForm = reactive({
  reason: '' // 取消原因（后端非必填）
})
const cancelRules = reactive({
  reason: [{ message: '请输入取消调度的原因', trigger: 'blur' }] // 前端提示性校验
})
// 当前操作的调度ID
const currentCancelDispatchId = ref(0)

// 页面初始化加载列表
onMounted(() => {
  fetchDispatchList()
})

const fetchDispatchList = async () => {
  try {
    // 1. 开启加载状态（禁用搜索按钮、输入框、分页）
    searchLoading.value = true
    tableLoading.value = true

    // 2. 构造请求参数：分页参数 + 报案ID模糊查询关键词
    const requestParams = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      // 模糊查询：若输入了报案ID，则传递（为空时不传递，后端查所有待确认数据）
      ...(searchForm.reportId && { reportId: searchForm.reportId.trim() })
    }

    // 3. 调用目标接口（GET方法）
    const response = await hxxp.get('/aiSurveyReport/selectDispatchList', {
      params: requestParams, // 所有参数通过URL查询参数传递（含reportId）
      timeout: 10000
    })

    // 4. 解析响应数据（匹配后端嵌套结构）
    if (response.code === 100200 && response.data?.code === 100200) {
      const result = response.data.data
      dispatchList.value = result.data || []
      pageNum.value = result.pageNum || 1
      pageSize.value = result.pageSize || 2
      total.value = result.total || 0
      // 提示优化：区分“模糊查询结果”和“默认查询结果”
      // const tip = searchForm.reportId
      //     ? `模糊搜索“${searchForm.reportId}”成功，共${total.value}条记录`
      //     : `加载成功，共${total.value}条待确认调度记录`
      // ElMessage.success(tip)
    } else {
      throw new Error(`接口提示：${response.data.msg || response.data.data?.msg || '未知错误'}`)
    }
  } catch (error) {
    // 错误处理：明确提示模糊查询相关错误
    console.error('查勘调度列表加载失败:', error)
    const errorTip = searchForm.reportId
      ? `模糊搜索“${searchForm.reportId}”失败：${error.message || '网络异常'}`
      : `加载待确认调度记录失败：${error.message || '网络异常'}`
    ElMessage.error(errorTip)
    // 异常时重置列表数据
    dispatchList.value = []
    total.value = 0
  } finally {
    // 关闭加载状态（恢复搜索按钮、输入框、分页可用）
    searchLoading.value = false
    tableLoading.value = false
  }
}

/**
 * 核心修改：确认调度（从表格中获取报案ID和查勘员工号，传递给后端）
 * @param {Number} dispatchId - 当前点击的调度ID
 */
const handleConfirmDispatch = async (dispatchId) => {
  try {
    // 1. 关键：通过dispatchId匹配表格中的当前行数据，提取所需字段
    const currentRow = dispatchList.value.find(row => row.dispatchId === dispatchId)
    if (!currentRow) {
      ElMessage.error('未找到当前调度任务的数据，请刷新列表后重试')
      return
    }

    // 2. 提取表格中的报案ID（reportId）和查勘员工号（surveyorWorkNo）
    const { reportId, surveyorWorkNo } = currentRow
    // 前置校验：确保表格数据中存在这两个字段（避免接口调用失败）
    if (!reportId) {
      ElMessage.warning('当前调度任务缺少“报案ID”，无法确认调度')
      return
    }
    if (!surveyorWorkNo) {
      ElMessage.warning('当前调度任务缺少“查勘员工号”，无法确认调度')
      return
    }

    // 3. 弹出确认对话框（告知用户将传递的字段值，提升透明度）
    await ElMessageBox.confirm(
      `确定要确认该调度任务吗？\n
        调度ID：${dispatchId}\n
        报案ID：${reportId}\n
        查勘员工号：${surveyorWorkNo}`,
      '确认调度',
      {
        type: 'primary',
        closeOnClickModal: false,
        dangerouslyUseHTMLString: true // 支持换行显示
      }
    )

    // 4. 开启加载状态（禁用操作按钮，防止重复提交）
    searchLoading.value = true
    // 5. 调用后端确认接口：传递dispatchId（路径参数）+ reportId和surveyorWorkNo（查询参数）
    const response = await hxxp.put(`/aiSurveyReport/confirmDispatch/${dispatchId}`, null, {
      params: {
        surveyInWorkNo: currentRow.surveyorWorkNo?.trim() || '', // 名称映射
        reportNo: currentRow.reportId?.trim() || '' // 名称映射
      },
      timeout: 10000
    })

    // 6. 处理响应结果
    if (response.code === 100200) {
      ElMessage.success('调度确认成功！')
      fetchDispatchList() // 确认后重新加载列表，更新状态
    } else {
      throw new Error(response.msg || '确认调度失败，接口返回异常')
    }
  } catch (error) {
    // 错误处理：区分用户取消和实际错误
    if (error === 'cancel') {
      ElMessage.info('已取消确认操作')
    } else {
      ElMessage.error(`确认失败：${error.message || '网络异常，请重试'}`)
    }
  } finally {
    // 关闭加载状态
    searchLoading.value = false
  }
}

/**
 * 取消调度（原逻辑不变，增加加载状态控制）
 */
const handleCancelDispatch = (dispatchId) => {
  const currentRow = dispatchList.value.find(item => item.dispatchId === dispatchId)
  if (currentRow) {
    ElMessage.info(`当前调度状态：${getStatusText(currentRow.dispatchStatus)}，可执行取消操作`)
  }
  currentCancelDispatchId.value = dispatchId
  cancelForm.reason = ''
  cancelReasonVisible.value = true
}

/**
 * 提交取消原因（原逻辑不变，增加加载状态控制）
 */
const submitCancelReason = async () => {
  try {
    // 开启加载状态
    searchLoading.value = true

    const response = await hxxp.put(`/aiSurveyReport/rejectedDispatch/${currentCancelDispatchId.value}`, null, {
      params: { cancelReason: cancelForm.reason.trim() },
      timeout: 5000
    })

    if (response.code === 100200) {
      ElMessage.success('调度取消成功')
      cancelReasonVisible.value = false
      fetchDispatchList() // 取消后重新搜索，更新列表
    } else {
      throw new Error(response.msg || '取消失败')
    }
  } catch (error) {
    ElMessage.error(`取消失败：${error.message || '操作异常'}`)
  } finally {
    // 关闭加载状态
    searchLoading.value = false
  }
}

/**
 * 重置搜索表单：清空输入框并重新加载默认数据（待确认状态）
 */
const resetSearchForm = () => {
  searchForm.reportId = '' // 清空报案ID输入框
  pageNum.value = 1 // 重置到第一页
  fetchDispatchList() // 调用搜索函数，加载默认数据
}

/**
 * 分页相关方法（原逻辑不变）
 */
const handlePageSizeChange = (size) => {
  pageSize.value = size
  pageNum.value = 1
  fetchDispatchList()
}

const handleCurrentPageChange = (page) => {
  pageNum.value = page
  fetchDispatchList()
}

/**
 * 工具方法：时间格式化（原逻辑不变）
 */
const formatDateTime = (isoTime) => {
  if (!isoTime) return '-'
  const date = new Date(isoTime)
  if (isNaN(date.getTime())) return '-'
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')
    }-${String(date.getDate()).padStart(2, '0')
    } ${String(date.getHours()).padStart(2, '0')
    }:${String(date.getMinutes()).padStart(2, '0')
    }:${String(date.getSeconds()).padStart(2, '0')
    }`
}

/**
 * 工具方法：状态文本/标签转换（原逻辑不变）
 */
const getStatusText = (status) => {
  const statusMap = { 1: '待确认', 2: '已确认', 3: '查勘中', 4: '查勘完成', 5: '已取消' }
  return statusMap[status] || '未知状态'
}

const getStatusTagType = (status) => {
  const typeMap = { 1: 'warning', 2: 'primary', 3: 'info', 4: 'success', 5: 'danger' }
  return typeMap[status] || 'default'
}

const getStatusTagIcon = (status) => {
  const iconMap = { 1: 'Clock', 2: 'Check', 3: 'Loading', 4: 'CircleCheck', 5: 'CircleClose' }
  return iconMap[status] || ''
}

/**
 * 查看报案详情（原逻辑不变）
 */
const handleViewReport = (reportId) => {
  currentReportId.value = reportId
  reportDetailVisible.value = true
}

/**
 * 表格行点击（原逻辑不变）
 */
const handleRowClick = (row) => {
  currentCancelDispatchId.value = row.dispatchId
}
</script>

<style scoped>
/* 基础样式保持不变，优化搜索区域交互体验 */
.dispatch-list-container {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 60px);
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
}

.page-header .desc {
  font-size: 14px;
  color: #6b7280;
}

/* 搜索栏优化：增加阴影和内边距 */
.search-bar {
  margin-bottom: 24px;
  padding: 16px 20px;
  background-color: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
}

.btn-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.table-container {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
}

.remark-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
}

.report-detail-content {
  line-height: 2;
}

.report-detail-content .label {
  display: inline-block;
  width: 80px;
  font-weight: 500;
  color: #4b5563;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .dispatch-list-container {
    padding: 12px;
  }

  .search-bar {
    padding: 12px 16px;
  }

  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-group .el-button {
    width: 100%;
  }

  .el-table__fixed-left,
  .el-table__fixed-right {
    display: none !important;
  }
}
</style>